<script>
export default {
  name: "SelectShippingMethod",
}
</script>

<script setup>
import { tmsOverallOptions } from "@/api/public"
import selectOptionsStore from "@/store/modules/selectOptionsStore"

const useSelectOptionsStore = selectOptionsStore()

const emits = defineEmits(["update:modelValue"])
const props = defineProps({
  valueKey: {
    type: String,
    default: "channel_id",
  },
  labelKey: {
    type: String,
    default: "channel_name",
  },
  modelValue: [String, Object, Array, Number],
})

const currentValue = computed({
  get: () => {
    return props.modelValue
  },
  set(val) {
    emits("update:modelValue", val) // 更新value的值
  },
})

const optionsList = computed(() => {
  const local = useSelectOptionsStore.selectShippingMethod
  if (!local.length) {
    useSelectOptionsStore.getOptions(() => {
      tmsOverallOptions({
        params: ["mapChannel"],
      }).then((res) => {
        useSelectOptionsStore.setStore(res.data.mapChannel, "selectShippingMethod")
      })
    })
  }
  return local
})
const getLable = (v) => {
  return optionsList.value.find((item) => item[props.valueKey] == v)?.[props.labelKey] || ""
}
defineExpose({
  optionsList,
  getLable,
})
</script>

<template>
  <el-select v-bind="$attrs" v-model="currentValue" clearable filterable class="select-wrap">
    <el-option
      v-for="item in optionsList"
      :key="item[valueKey]"
      v-show="item.status === 1 || (modelValue?.includes && modelValue?.includes(item[valueKey]))"
      :label="item[labelKey]"
      :value="item[valueKey]"
    />
  </el-select>
</template>

<style scoped lang="scss"></style>
